<template>
    <el-dialog :title="dialogProps.title" :visible.sync="dialogProps.visible" width='550px' append-to-body  :fullscreen = 'Global.currentDevice'>         
        <el-tree  :data="parentlist"
                  show-checkbox  check-strictly
                  node-key="code"
                  default-expand-all
                  :default-checked-keys='defaultCheckedId'
                  :expand-on-click-node='false'
                  :check-on-click-node="true"
                  
                  @node-click="nodeClick"  
                  @check ='checkNode'
                 ref="tree"  >
            <span class="custom-tree-node" slot-scope="{ node, data }"  >
                  <span>{{ data.name }}</span>
            </span>
        </el-tree>
        <div slot="footer" class="dialog-footer">
            <el-button @click="close()">取 消</el-button>
            <el-button type="primary" @click="submit()">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script charset="utf-8" type="text/javascript">
export default {
  name: 'chooseApart',
  props:{
      parentlist : {
          type: Array,
          default:function(){
                return [];
          }
      },
      selfCode:{
            type: String,
            default:''
      }
  },
  data() {

    return {
      //dialogo基本信息  显示隐藏状态  title 
      dialogProps: {
        visible: false,
        action: '',
        title: '选择上级部门'
      },

      /*设置默认选中的部门  根部门or其他已经设置的*/
      defaultCheckedId:[],
      /*当前已经选中的部门id和值*/
      checkedId:null,
      checkedNode:null,
    }
  },
  created(){
  },
  methods: {
    //tree点击节点的回调函数  
    nodeClick(data,checked,node){
        this.checkedId = data.code
        this.checkedNode=data.name
        this.$refs.tree.setCheckedNodes([data]);
    },
    //当复选框被点击的时候触发  因为只控制了节点点击，所以当单独点击复选框的时候它会多选，需要一起控制
    checkNode(data,node){
        this.checkedId = data.code
        this.checkedNode=data.name
        this.$refs.tree.setCheckedNodes([data]);
    },
    submit() {
        this.$emit('save',this.checkedId,this.checkedNode)
        this.dialogProps.visible=false
        this.$refs.tree.setCheckedNodes([]);
    },

    close(){
        this.dialogProps.visible = false
         this.$refs.tree.setCheckedNodes([]);
         this.defaultCheckedId = []
    } 
    
  },
  mounted: function() {
    this.$nextTick(() => {
      this.$on('openChoose', function(id) {
        this.dialogProps.visible = true
        //此时树还没有被渲染，所以不能直接设置某个节点的状态；将这个值存在数据中，当树渲染数据时，它会自动跟进去
        this.defaultCheckedId=[id]
      })
    })
  },
  updated(){
    
  },
  components:{
    
  }
}
</script>

<style  scoped>
</style>


